/**
 * ref 模板引用
 *
 *    作用：为了获取到普通元素的DOM对象或者组件元素的实例对象
 *
 *    类组件中使用：
 *
 *      1. 字符串方式标记 + this.refs.xxx
 *      2. 函数方式
 *      3. 【推荐】使用 React.createRef() 来创建一个 ref 对象
 *          1. 先创建一个 ref 对象。通过 React.createRef()
 *          2. 把 ref 对象赋值给某个 ref 属性
 *          3. 访问 ref 对象，该对象内部有一个 current 属性，属性值就是我们要的东西。
 *
 *    PS: ref 不能用在函数组件上。因为函数组件没有实例没有this
 *        Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
 *
 */

import React from "react";
import Hello from "./components/Hello";
import World from "./components/World";

// let obj = { name: "张三", age: "" };
// console.log("obj", obj);
// obj.age = 18;

class App extends React.Component {
  myP: HTMLParagraphElement | null | undefined;
  myHello: Hello | null | undefined;

  aP = React.createRef<HTMLParagraphElement>();
  aHello = React.createRef<InstanceType<typeof Hello>>();

  fn1 = () => {
    console.log(this.refs.ppp);
    console.log(this.refs.aaa);

    console.log("this.myP", this.myP);
    console.log("this.myHello", this.myHello);

    // this.myP?.innerHTML
    // this.myHello?.say()

    console.log("this.aP", this.aP);
    console.log("this.aHello", this.aHello);

    // this.aP.current?.innerHTML;
    // this.aHello.current?.say();
  };

  render(): React.ReactNode {
    console.log("App Render", this);
    // console.log("App Render", this.refs.ppp); // undefined

    return (
      <div>
        {/* 字符串方式 */}
        <p ref="ppp">App</p>
        <Hello ref="aaa" />

        {/* 函数方式，该函数默认会触发一次，会自动接受一个 el 的参数 */}
        <p ref={(el) => (this.myP = el)}>函数方式</p>
        <Hello ref={(el) => (this.myHello = el)} />

        <p ref={this.aP}>createRef方式</p>
        <Hello ref={this.aHello} />

        <hr />

        <World ref="abcd" />

        <hr />
        <button onClick={this.fn1}>按钮1</button>
      </div>
    );
  }
}
export default App;
